import React, { Component } from 'react'
import "./changePassword.css"
import { LeftOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { Form, Input, Button, Checkbox } from 'antd';
import { Link } from "react-router-dom"
import { holdPassword } from '../../api/login';

const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
  const validateMessages = {
    required: "失败",
    // ...
  };
  
const Demo = () => {
  const submitPassword = () =>{
    let data = form.getFieldsValue()
    console.log(data)
    holdPassword(data).then(res => {
       
    })

  }
    const [form] = Form.useForm();
    const onFinish = (values) => {
      console.log('Success:', values);
    };
  
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
    };
    return (
        <Form
          submit={submitPassword}
          form={form}
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          validateMessages={validateMessages}
        >
          <Form.Item
            name="oldpassword"
            rules={[
              {
                required: true,
                
                message: '请输入旧密码',
              },
            ]}
          >
            <Input placeholder="请输入旧密码"/>
          </Form.Item>
    
          <Form.Item
            name="newpassword"
            rules={[
              {
                max:16,
                min:6,
                required: true,
                message: '请输入新密码（6-16位字符）',
              },
            ]}
          >
            <Input.Password placeholder="请输入新密码（6-16位字符）"/>
          </Form.Item>
    
          <Form.Item {...tailLayout}>
            <Button
            onClick={()=>submitPassword()}
            >
              111111111
            </Button>
          </Form.Item>
        </Form>
      );
    };

export default class changePassword extends Component {

    SavePassword = () =>{
        holdPassword({}).then()
    }
    oldPassword = ""
    newPassword = ""
    
    
    render() {
        return (
            <div>
                <div className="changeHeader">
                    <Link to="/accountSafe" className="changeBack">
                        <LeftOutlined />
                    </Link>
                    <span>
                        修改密码
                    </span>
                    {/* <div className="changeHold" onClick={this.SavePassword}>
                        保存
                    </div> */}
                </div>
                <div className="changeMain">
                    <Demo />
                </div>
            </div>
        )
    }
}
